import React, { useEffect } from 'react';
import { router } from 'expo-router';
import { View, ActivityIndicator } from 'react-native';
import { useAppDispatch, useAppSelector } from '../store/hooks';
import { getCurrentUser } from '../store/userSlice';

interface AuthGuardProps {
  children: React.ReactNode;
}

/**
 * 路由守卫组件，用于保护需要登录的路由
 * 未登录用户将被重定向到登录页面
 */
export const AuthGuard: React.FC<AuthGuardProps> = ({ children }) => {
  const { isAuthenticated, loading, currentUser } = useAppSelector((state) => state.user);
  const dispatch = useAppDispatch();

  useEffect(() => {
    // 如果未登录，尝试获取当前用户信息
    if (!isAuthenticated && !loading && !currentUser) {
      dispatch(getCurrentUser())
        .unwrap()
        .catch(() => {
          // 如果获取用户信息失败，重定向到登录页
          router.replace('/login');
        });
    }
  }, [isAuthenticated, dispatch, loading, currentUser]);

  // 如果正在加载，显示加载指示器
  if (loading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" color="#5e35b1" />
      </View>
    );
  }

  // 如果认证通过，显示子组件
  if (isAuthenticated && currentUser) {
    return <>{children}</>;
  }

  // 如果未认证，返回null（路由已经在useEffect中处理）
  return null;
};

export default AuthGuard; 